<template>
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="list1" lineWidth="15" :scrollable="false" :activeStyle="{
		        color: '#3478f5',
		        fontWeight: 'bold',
		        transform: 'scale(1.05)'
		    }" @change="tabclick"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<view class="mainpadding_top ffffff" v-for="item in list.data" :key="item.id">
				<view class="flexbetween">
					<!-- <view class="flexleft">
						<image :src="item.teacher" mode="" class="listheadplimg"></image>
						<view class="flexcolumnbet" style="height: 70rpx;">
							<view class="xiaohei margin_left1">李老师李老师</view>
							<view class="xiaohui margin_left1">2022.02.02</view>
						</view>
					</view> -->
					<view class="titletext main_size bold margin_left1">{{item.createtime_text}}</view>
					<view class="bghonglable xiaohong">标金：{{item.price}}元</view>
				</view>
				<view class="flex_wrap flexleft ">
					<view class="bglanlable margin_top2 margin_right1 xiaolan" v-if="item.grade.name">{{item.grade.name}}、{{item.subject.name}}</view>
					<view class="bglanlable margin_top2 margin_right1 xiaolan" v-if="item.is_need_video">需要视频讲解</view>
					<view class="bglanlable margin_top2 margin_right1 xiaolan">接单后{{item.duration}}分种内回答</view>
				</view>
				<view class="hei_text bold main_size margin_top2">{{item.content}}</view>
				<!-- <view class="xiaohui margin_top2">距离上次表演已经过求一年了不知道这次的表现怎么样他究竟能不能获得冠军</view> -->
				<view class="flexleft pdl">
					<view class="itemimgBox flexcenter margin_top" v-for="ite in item.images_arr" :key="ite">
						<image class="listleftimg radius" :src="ite" mode=""></image>
					</view>
				</view>
				<view class="flexbetween margin_top2">
					<view class="flexleft" v-if="item.teacher_id">
						<image :src="item.teacher.avatar"
							mode="" class="listheadplimg2"></image>
						<view class="hei_text margin_left2 bold main_size">{{item.teacher.username}}</view>
					</view>
					<view class="flexleft" v-else></view>
					<view class="flexright">
						<!-- 待接单 -->
						<template v-if="item.state==3">
							<view class="honglable2 radius flexleft" @click.stop="chedan(item.id)">
								<u-icon name="trash" color="#ff0000" size="16"></u-icon>
								<view class="xiaohong margin_left1">撤单</view>
							</view>
						</template>
						<!-- 待回答 -->
						<template v-if="item.state==4">
							<view class="flexright">
								<view class="xiaolan">回答倒计时</view>
								<u-count-down :time="Number(item.atuocanceltime)*1000 - Number(new Date())" class="xiaolan"
									format="HH:mm:ss"></u-count-down>
							</view>
						</template>
						<!-- 已完成 -->
						<template v-if="!item.is_reply && item.state==4">
							<view class="flexright">
								<view class="xiaohong">未在规定时间内回答，金额已原路返回！</view>
							</view>
						</template>
						<template>
							<view class="lanlable2 radius flexleft" v-if="item.is_reply" @click.stop="jumpurl('/pages_mine/huida?id=',item.id)">
								<u-icon name="chat" color="#3478f5" size="16"></u-icon>
								<view class="xiaolan margin_left1">回答</view>
							</view>
							<view class="honglable2 margin_left2 radius flexleft" v-if="item.can_blacklist" @click.stop="lahei(item.teacher_id)">
								<u-icon name="minus-circle" color="#ff0000" size="16"></u-icon>
								<view class="xiaohong margin_left1">拉黑</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [{
						name: "全部",
						id: 0,
					}, {
						name: "待接单",
						id: 3,
					},
					{
						name: "待回答",
						id: 4,
					},
					{
						name: "已完成",
						id: 5,
					}
				],
				tabsId: "0",
				page: 1,
				limit: 12,
				list: {
					data: []
				},
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/teacher/getquestionlist', 'GET', {
					page: page || 1,
					state: this.tabsId,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			tabclick(item) {
				this.tabsId = item.id
				this.init()
			},
			jumpurl(url, id) {
				uni.navigateTo({
					url: url + id
				})
			},
			chedan(id) {
				httpRequest.modal('提示', '确定撤单吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/teacher/cancel', 'POST', {
							teacher_question_id:id,
						}).then(res => {
							httpRequest.toast(res.msg)
							this.init()
						})
					}
				})
			},
			lahei(id) {
				httpRequest.modal('提示', '确定拉黑吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/teacher/blacklist', 'POST', {
							teacher_id:id,
						}).then(res => {
							httpRequest.toast(res.msg)
							this.init()
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bghonglable {
		background-color: #feeae9;
		border-radius: 5rpx;
		padding: 7rpx 10rpx;
	}

	.bglanlable {
		background-color: #ebf2fe;
		border-radius: 5rpx;
		padding: 7rpx 10rpx;
	}

	.honglable2 {
		border: 1rpx solid #ff0000;
		padding: 10rpx 15rpx;
	}

	.lanlable2 {
		border: 1rpx solid #3478f5;
		padding: 10rpx 15rpx;
	}

	.listheadplimg2 {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		min-width: 60rpx;
	}

	/deep/.u-count-down__text {
		color: #3478f5;
		font-size: 24rpx;
	}
</style>